import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import vueDevTools from 'vite-plugin-vue-devtools'
import VueRouter from 'unplugin-vue-router/vite' // 方案二：自动化路由
import { VueRouterAutoImports } from 'unplugin-vue-router' // 自动化路由
import UnoCSS from 'unocss/vite'
import AutoImport from 'unplugin-auto-import/vite' // 自动引入组合式 api
import Components from 'unplugin-vue-components/vite' // 组件自动引入
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import Layouts from 'vite-plugin-vue-layouts'
import { VitePWA } from 'vite-plugin-pwa'
import { viteMockServe } from 'vite-plugin-mock'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    VueRouter({}),
    vue({
      include: [/\.vue$/, /\.md$/],
      script: {
        // vue3.3之后实验特性
        defineModel: true,
        propsDestructure: true,
      },
    }),
    vueJsx(),
    vueDevTools(),
    UnoCSS({
      configFile: './uno.config.ts',
    }),
    AutoImport({
      include: [
        /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
        /\.vue$/,
        /\.vue\?vue/, // .vue
        /\.md$/, // .md
      ],
      // vueTemplate: true, // 自动引入 vue 相关 API
      imports: [
        'vue',
        // 'vue-router'
        VueRouterAutoImports,
        '@vueuse/core', // 自动引入 vueuse 相关 API
      ],
    }),
    Components({
      // 文件夹名作为组件私缀
      directoryAsNamespace: true, // 目录作为命名空间
      // 如果出现相同前缀，则折叠，比如文件夹名是user 组件UserInfo 则最终是 UserInfo 而不是 UserUserInfo
      collapseSamePrefixes: true, // 折叠相同的命名空间
      include: [/\.vue$/, /\.vue\?vue/, /\.md$/], // 包含 .vue, .vue?vue, .md 文件
      resolvers: [
        ElementPlusResolver(), // 自动引入 ElementPlus 组件和图标组件
      ],
    }),
    Layouts({
      layoutsDirs: 'src/layouts', // 布局目录
      defaultLayout: 'default', // 默认布局
    }),
    VitePWA({
      manifest: {
        name: 'Vite App',
        short_name: 'Vite App',
        theme_color: '#ffffff',
        // public 下
        icons: [
          {
            src: '/192x192.png',
            sizes: '192x192',
            type: 'image/png',
          },
          {
            src: '/512x512.png',
            sizes: '512x512',
            type: 'image/png',
          },
        ],
      },
      registerType: 'autoUpdate', // 立即更新
    }),

    viteMockServe({
      mockPath: 'mock', // mock 文件夹
      enable: false, // 启用 mock
    }),
  ],

  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },

  preview: {
    open: true, // 预览时自动打开浏览器
  },
})
